<template>
  <!-- header begin -->
  <el-row>
    <!-- logo begin -->
    <el-col :span="6" class="flex flex-col-center">
      <div class="grid-content">
        <el-image
          style="width: 130px; height: 40px"
          :src="url"
          fit="fill"
        ></el-image>
      </div>
    </el-col>
    <!-- logo end -->

    <!-- menu begin -->
    <el-col :span="12">
      <div class="grid-content">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          text-color="#000"
          active-text-color="#f9bc02"
        >
          <template v-for="item in menu" :key="item.id">
            <el-menu-item
              v-if="!item.submenu"
              :index="item.id"
              @click="to(item.path)"
              >{{ item.title }}</el-menu-item
            >

            <el-submenu v-else :index="item.id">
              <template #title>{{ item.title }}</template>
              <el-menu-item
                v-for="sub in item.submenu"
                :key="sub.id"
                :index="sub.id"
                @click="to(sub.path)"
                >{{ sub.title }}</el-menu-item
              >
            </el-submenu>
          </template>
        </el-menu>
      </div>
    </el-col>
    <!-- menu end -->

    <!-- btn begin -->
    <el-col :span="6" class="flex flex-col-center flex-row-right">
      <div class="grid-content">
        <el-button
          class="login-btn"
          type="primary"
          round
          @click="dialogVisible = true"
          >登录/注册</el-button
        >
      </div>
    </el-col>
    <!-- btn end -->
  </el-row>
  <!-- header end -->

  <!-- login dialog begin -->
  <el-dialog v-model="dialogVisible" width="450px">
    <template #title>
      <span v-if="page === 'login'" class="dialog-title">
        <el-button size="mini" plain>{{ titleBtnText }}</el-button>
      </span>

      <span v-if="page === 'regist'" class="dialog-title">
        <el-button size="mini" type="text" plain>{{ "返回登陆" }}</el-button>
      </span>
    </template>
    <login-box></login-box>
  </el-dialog>
  <!-- login dialog end -->
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, reactive, toRefs } from "vue";
import loginBox from "@/components/common/loginbox.vue";

export default defineComponent({
  components: { loginBox },
  setup() {
    const { proxy }: any = getCurrentInstance();

    const state = reactive({
      page: "login", // or regist
      dialogVisible: false,
      titleBtnText: "微信登录",
      url: require("@/assets/images/home/logo-header-dark.png"),
      activeIndex: "1",
      menu: [
        {
          id: "1",
          title: "首页",
          path: "/",
        },
        {
          id: "2",
          title: "在线简历",
          path: "/monban",
        },
        {
          id: "3",
          title: "Word模板下载",
          path: "/word",
        },
        {
          id: "4",
          title: "职业圈",
          path: "/quan",
          submenu: [
            {
              id: "4-1",
              title: "简历攻略",
              path: "/word",
            },
            {
              id: "4-2",
              title: "简历范文",
              path: "/word",
            },
            {
              id: "4-3",
              title: "面试技巧",
              path: "/word",
            },
            {
              id: "4-4",
              title: "职场指南",
              path: "/word",
            },
          ],
        },
      ],
    });

    const handleSelect: any = (key: any, keyPath: any) => {
      console.log(key, keyPath);
    };

    const to: any = (path: string): void => {
      proxy.$root.$router.push({ path: path });
    };

    return {
      ...toRefs(state),
      handleSelect,
      to,
    };
  },
});
</script>

<style lang="scss" scoped>
#header {
  width: 100%;
  height: 60px;
  box-shadow: 0px 10px 50px -15px rgb(0 0 0 / 10%) !important;
}

.opc {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.login-btn {
  height: 30px !important;
  min-height: 30px !important;
  width: 100px !important;
  line-height: 1;
  font-family: "微软雅黑 Bold", "微软雅黑";
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
}

// .trans-color[theme="dark-mode"] img {
//   filter: invert(1) hue-rotate(180deg);
// }

// .trans-color {
//   transition: color 300ms, background-color 300ms;
// }
</style>